<template>
  <nav class="aui-navbar" :class="`aui-navbar--${$store.state.navbarLayoutType}`">  
    <div class="aui-navbar__header">
      <h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })">
        <a class="aui-navbar__brand-lg" href="javascript:;">毕业设计过程管理系统</a>
        <a class="aui-navbar__brand-mini" href="javascript:;">GDPMS</a>
      </h1>
    </div>
    <div class="aui-navbar__body">
      <el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
        <el-tooltip effect="dark" content="展开/折叠" placement="bottom">
          <el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold">
            <svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch" aria-hidden="true">
              <use xlink:href="#icon-outdent"></use>
            </svg>
          </el-menu-item>
        </el-tooltip>
        <el-tooltip effect="dark" content="刷新" placement="bottom">
          <el-menu-item index="2" @click="refresh()">
            <svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--refresh" aria-hidden="true">
              <use xlink:href="#icon-sync"></use>
            </svg>
          </el-menu-item>
        </el-tooltip>
      </el-menu>
      <el-menu class="aui-navbar__menu" mode="horizontal">
        <el-tooltip effect="dark" content="主题设置" placement="bottom">
          <el-menu-item index="1" @click="$router.push({ name: 'Theme' })">
              <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
                <use xlink:href="#icon-setting"></use>
              </svg>
            <!-- <template slot="title"> -->
              <!-- <el-badge value="new"> -->
                <!-- <i size="small" class="el-icon-setting"></i> -->
              <!-- </el-badge> -->
            <!-- </template> -->
          </el-menu-item>
        </el-tooltip>
        <!-- <el-tooltip effect="dark" content="官网" placement="bottom">
          <el-menu-item index="4">
            <a href="" target="_blank">
              <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
                <use xlink:href="#icon-earth"></use>
              </svg>
            </a>
          </el-menu-item>
        </el-tooltip>
        <el-tooltip effect="dark" content="Gitee" placement="bottom">
          <el-menu-item index="5">
            <a href="https://gitee.com/lizhi7/Graduation-design-process-management-system" target="_blank">
              <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
                <use xlink:href="#icon-Gitee"></use>
              </svg>
            </a>
          </el-menu-item>
        </el-tooltip> -->
        <el-tooltip effect="dark" content="全屏" placement="bottom">
          <el-menu-item index="6" @click="fullscreenHandle()">
            <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
              <use xlink:href="#icon-fullscreen"></use>
            </svg>
          </el-menu-item>
        </el-tooltip>
        <el-menu-item index="7" class="aui-navbar__avatar">
          <el-dropdown placement="bottom" :show-timeout="0">
            <span class="el-dropdown-link">
              <!-- <img src="~@/assets/img/avatar.png"> -->
              <span>{{ '您好！' +$store.state.user.name +' '+'您的角色是：'+ role }}</span>
              <i class="el-icon-arrow-down"></i>
            </span>
            <el-dropdown-menu slot="dropdown" @command="handleCommand">
              <el-dropdown-item @click.native="updatePasswordHandle(true)">修改密码</el-dropdown-item>
              <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
              <!-- <el-dropdown-item @click.native="logoutHandle1()">退出2</el-dropdown-item> -->
              <!-- <el-dropdown-item  command="logout">退出1</el-dropdown-item>
              <el-dropdown-item command="logout2">退出2</el-dropdown-item> -->
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePasswordVisible" ref="updatePassword"></update-password>
  </nav>
</template>

<script>
import servicesApi from '@/services/servicesApi';
import screenfull from 'screenfull'
import store from '@/store';
import { debounce } from 'lodash';
import { clearLoginInfo } from '@/utils';
import UpdatePassword from '@/views/components/MainUpdatePassword.vue'
export default {
  inject: ['refresh'],
  name: 'topNav',
  // props: {
  //   msg: String
  // },
  components: {
    UpdatePassword
  },
  data() {
    return {
      role: '学生',
      updatePasswordVisible: false,
      messageTip: false
    }
  },
  created() {
    // console.log('是否登录=%s', this.$route.params.hasLogin)
    // console.log('路由名=%s', this.$route.name)
    if (this.$route.params.hasLogin == false) {
      this.updatePasswordHandle(false)
    }
    let userRole = this.$store.state.user.state
    if (userRole===3) {
      this.role = '管理员'
    } else if (userRole === 2) {
      this.role = '教师'
    } else {
      this.role = '学生'
    }
  },
  methods: {
    // refresh: debounce(function () {
    //   // 防抖函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法
    //   // { 'leading': true, 'trailing': false } ->先调用后等待2000ms
    //   window.location.reload()
    // }, 2000, { 'leading': true, 'trailing': false }),
    // 全屏
    fullscreenHandle() {
      if (!screenfull.isEnabled) {
        return this.$message({
          message: '确认开启全屏',
          type: 'warning',
          duration: 500
        })
      }
      screenfull.toggle()
    },
    // 修改密码
    updatePasswordHandle(data) {
      this.updatePasswordVisible = true
      this.$nextTick(() => {
        this.$refs.updatePassword.init(data)
      })
    },
    // tabs, 关闭全部
    tabsCloseAllHandle() {
      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name === 'home')
      // this.$router.push({ name: 'home' })
    },
    // 退出
    logoutHandle() {
      this.$confirm('确认进行[退出]操作', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tabsCloseAllHandle()
        setTimeout(() => {
          servicesApi.logout().then(res => {
            if (res.data.code == 200) {
              this.$router.push({ name: 'login' })
              clearLoginInfo()

              this.$message({
                showClose: true, //可关闭
                message: '退出登录',
                type: 'success',
              });
            } else {
              return this.$message.error(res.data.msg)
            }
          })
        }, 500)
        
        
        // this.$http.post('/logout').then(({ data: res }) => {
        //   if (res.code !== 0) {
        //     return this.$message.error(res.msg)
        //   }
        //   clearLoginInfo()
        //   this.$router.push({ name: 'login' })
        // }).catch(() => { })
      }).catch(() => { })
    },
    logoutHandle1() {
      this.$confirm('确认进行[退出]操作', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push({ name: 'login' })
        clearLoginInfo()
        this.$message({
          showClose: true, //可关闭
          message: '无接口退出登录',
          type: 'success',
        });
        
      }).catch(() => { })
    },
    handleCommand(command) { //处理下拉菜单项点击事件
      if (command=='logout') {
        servicesApi.logout().then(res => {
          if (res.data.code==200) {
            this.$router.push({ name: 'login' })
            clearLoginInfo()
            
            this.$message({
              showClose: true, //可关闭
              message: '退出登录',
              type: 'success',
            });
          }
        })
        
      } else if (command=='logout2') { //清除登录信息
        clearLoginInfo()
        this.$router.push({ name: 'login' })
        
        this.$message({
          showClose: true, //可关闭
          message: '无接口退出登录',
          type: 'success',
        });
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
